<template>
  <view class="popup">
    <u-popup
      :show="show"
      mode="bottom"
      height="240px"
      close-on-click-overlay
      @close="show = false"
      bg-color="#fff"
      round="20"
    >
      <view class="body">
        <Sub-title
          label="完善用户信息"
          size="28rpx"
          color="#2f2e2e"
          padding="40rpx 0 20rpx 0"
        />
        <view>
          <view class="choose-avatar-row">
            <button
              class="avatar-wrapper"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <u-image
                show-loading
                class="avatar"
                :src="avatarUrl"
                loading-icon="account-fill"
                width="40px"
                height="40px"
              />
            </button>
            <button
              class="avatar-wrapper"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
              style="
                display: contents;
                color: #807e7e;
                border: none;
                font-size: 24rpx;
                text-align: left;
              "
            >
              点击选择头像
            </button>
          </view>
          <view class="choose-nickname-row">
            <text>昵称</text>
            <input
              v-model="nickname"
              @blur="inputName"
              type="nickname"
              placeholder="请输入昵称"
              style="color: #807e7e"
              class="codeinput"
            />
          </view>
        </view>
        <view class="footer">
          <button @click="show = false">关闭</button>
          <button :class="{ inactive: disabled }" @click="submit">登录</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { commonUpload } from "@/request/common.js";
export default {
  data() {
    return {
      avatarUrl: "", // 默认头像
      nickname: "", // 昵称
      disabled: false,
    };
  },
  model: {
    prop: "value",
    event: "cencel",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("cencel", false);
      },
    },
  },
  watch: {
    show(v) {
      if (v) {
        uni.getSetting({
          success(res) {
            console.log(res.authSetting);
          },
        });
      }
    },
    nickname(val) {
      if (val) {
        this.disabled = false;
      }
    },
  },
  methods: {
    //登录
    submit() {
      if (this.avatarUrl == "") {
        uni.showToast({
          title: "请上传头像",
          icon: "none",
        });
        return false;
      }
      if (this.nickname == "") {
        uni.showToast({
          title: "请填写昵称",
          icon: "none",
        });
        return false;
      }
      this.$emit("confirm", {
        nickname: this.nickname,
        avatarUrl: this.avatarUrl,
      });
    },
    // 选择头像事件
    onChooseAvatar(e) {
      let { avatarUrl } = e.detail;
      commonUpload(avatarUrl).then((res) => {
        if (res.code == 1) {
          this.avatarUrl = res.data.fullurl;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    // 昵称输入事件
    inputName(e) {
      const { value } = e.detail;
      this.nickname = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  .body {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .choose-avatar-row,
    .choose-nickname-row {
      height: 20%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 20px;
      font-size: 24rpx;
      border-bottom: 1px solid #f2f2f2;
      .avatar-wrapper {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        margin-right: 33rpx;
        .avatar {
          width: 100%;
          height: 100%;
        }
      }
    }
    .choose-nickname-row {
      border-top: none;
      text {
        width: 45px;
        margin-right: 24rpx;
        color: #807e7e;
      }
    }
    .footer {
      width: 100%;
      height: 30%;
      padding-top: 0px;
      display: flex;
      margin-top: 30rpx;
      margin-bottom: 100rpx;
      button {
        font-size: 24rpx;
        width: 30%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        background-color: #ffffff;
      }
      button:last-of-type {
        color: #fff;
        background-color: #3ba199;
      }
      .inactive {
        color: #ccc;
      }
    }
  }
  .codeinput {
    width: 60%;
    margin: 0 auto;
    height: 100rpx;
    line-height: 100rpx;
    color: #000000;
    float: left;
    margin-left: 5%;
    font-size: 26rpx;
  }
}
</style>
